import type { Model } from "@/service/types"
import { render } from "vue"

/**
 * 检测目标是否在父容器的显示区域
 * @param target 检测目标
 * @param parent 父容器
 * @returns 布尔类型
 */
export const isTargetInViewport = (target: HTMLElement, parent: HTMLElement) => {
  const rect = target.getBoundingClientRect()
  const leftInViewport = rect.left >= 50
  const rightInViewport = rect.right <= parent.clientWidth - 50
  return leftInViewport && rightInViewport
}
export const getBrowserInterfaceSize = () => {
  var pageWidth = window.innerWidth
  var pageHeight = window.innerHeight

  if (typeof pageWidth !== 'number') {
    //在标准模式下面
    if (document.compatMode === 'CSS1Compat') {
      pageWidth = document.documentElement.clientWidth
      pageHeight = document.documentElement.clientHeight
      console.log('CSS1Compat',pageHeight)
    } else {
      pageWidth = document.body.clientWidth
      pageHeight = document.body.clientHeight
      console.log('非 CSS1Compat',pageHeight)
    }
  }

  return {
    pageWidth: pageWidth,
    pageHeight: pageHeight
  }
}

/** 是否 PC 端 */
export const isPc = () => {
  const userAgentInfo = navigator.userAgent
  const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
  let flag = true
  for (let v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = false
      break
    }
  }
  return flag
}

export const getRealHeight = (item: Model, realWidth: number, template:any) => {
  const dom = document.createElement('div')
  render(
    h(template, {
      data: item,
      width: realWidth + 'px',
    }),
    dom
  )
  document.body.appendChild(dom)
  // 获取高度
  const height: number = dom.firstElementChild?.clientHeight || 100
  // 移除新容器
  document.body.removeChild(dom)
  // 返回高度
  return height
}